<template>
    <view class="coupon">
        <u-popup :show="show" round="12">
            <view>
                <view class="pv-40 f ai-c jc-s-b ph-32">
                    <view class="w-28"></view>
                    <view class="fs-40 fw-600 text-color4">我的优惠券</view>
                    <view class="w-28" @click="show = false"><u-icon name="close" color="#1A1A1A" size="14"></u-icon></view>
                </view>

                <u-tabs
                    :list="statusList"
                    @click="changeStatus"
                    lineColor="#4974F5"
                    lineWidth="28rpx"
                    lineHeight="6rpx"
                    :activeStyle="{ fontSize: '28rpx', fontWeight: '600', color: '#222222' }"
                    :inactiveStyle="{ fontSize: '28rpx', fontWeight: '400', color: '#999999' }"
                    :itemStyle="{ height: '80rpx' }"
                ></u-tabs>
                <view class="fs-28 text-color4 mt-32 pl-40" v-show="coupon"
                    ><text>已选中推荐优惠券，可抵扣</text><text class="fw-600">{{ couponPrice }}元</text>
                </view>
                <view class="fs-28 text-color4 mt-32 pl-40" v-show="!coupon">请选择优惠券 </view>
                <scroll-view scroll-y="true" class="h-600 ph-40 mt-45" v-show="curt == 0">
                    <!-- 1, "满减" 2, "折扣" -->
                    <view class="f mb-22" v-for="(item, index) in couponList" :key="index" @click="selectCoupon(item, index)">
                        <view class="w-201 h-212 coupon-bg">
                            <image
                                :src="getBaseUrl() + '/admin-api/system/file/19/get/23fe45455d13d2659448450ac4c6386c53c89b517d154c9cd221945761edeafd.png'"
                                class="w-f h-212"
                            ></image>
                            <view class="price w-f h-212 f fd-c ai-c jc-c" v-if="item.discountType == 1">
                                <view class="fs-72 fw-600 text-color5">{{ item.discountPrice }}</view>
                                <view class="fs-24 text-color5 mt-22">满{{ item.usePrice }}元可用</view>
                            </view>
                            <view class="price f fd-c ai-c jc-c" v-if="item.discountType == 2">
                                <view class="fs-72 fw-600 text-color5 f"
                                    >{{ item.discountPercent }}<view class="fs-24 fw-400 text-color5 f ai-f-e zhe ml-4">折</view></view
                                >
                                <view class="mt-22 fs-24 text-color5">无门槛</view>
                            </view>
                        </view>
                        <view class="f f1 ai-c jc-s-b coupon-box pl-24 pr-40">
                            <view class="f f1 fd-c">
                                <view class="fs-32 fw-600 text-color4">{{ item.name }}</view>
                                <view class="fs-24 text-color2 mt-8 text">限“猫猫和狗狗的粮食”购买服务使用</view>
                                <view class="fs-20 text-color3">即将到期 {{ item.validStartTime }}-{{ item.validEndTime }}</view>
                            </view>
                            <image :src="item.checked ? selectCheck : select" class="w-32 h-32 ml-32"></image>
                        </view>
                    </view>
                </scroll-view>
                <!-- 已使用 -->
                <scroll-view scroll-y="true" class="h-600 ph-40 mt-45" v-show="curt == 1">
                    <!-- 1, "满减" 2, "折扣" -->
                    <view class="f mb-22" v-for="(item, index) in useList" :key="index">
                        <view class="w-201 h-212 coupon-bg">
                            <image
                                :src="getBaseUrl() + '/admin-api/system/file/19/get/23fe45455d13d2659448450ac4c6386c53c89b517d154c9cd221945761edeafd.png'"
                                class="w-f h-212"
                            ></image>
                            <view class="price w-f h-212 f fd-c ai-c jc-c" v-if="item.discountType == 1">
                                <view class="fs-72 fw-600 text-color5">{{ item.discountPrice }}</view>
                                <view class="fs-24 text-color5 mt-22">满{{ item.usePrice }}元可用</view>
                            </view>
                            <view class="price f fd-c ai-c jc-c" v-if="item.discountType == 2">
                                <view class="fs-72 fw-600 text-color5 f"
                                    >{{ item.discountPercent }}<view class="fs-24 fw-400 text-color5 f ai-f-e zhe ml-4">折</view></view
                                >
                                <view class="mt-22 fs-24 text-color5">无门槛</view>
                            </view>
                        </view>
                        <view class="f f1 ai-c jc-s-b coupon-box pl-24 pr-40">
                            <view class="f f1 fd-c">
                                <view class="fs-32 fw-600 text-color4">{{ item.name }}</view>
                                <view class="fs-24 text-color2 mt-8 text">限“猫猫和狗狗的粮食”购买服务使用</view>
                                <view class="fs-20 text-color3">即将到期 {{ item.validStartTime }}-{{ item.validEndTime }}</view>
                            </view>
                            <image :src="item.checked ? selectCheck : select" class="w-32 h-32 ml-32"></image>
                        </view>
                    </view>
                </scroll-view>
                <!-- 已过期 -->
                <scroll-view scroll-y="true" class="h-600 ph-40 mt-45" v-show="curt == 2">
                    <!-- 1, "满减" 2, "折扣" -->
                    <view class="f mb-22" v-for="(item, index) in expireList" :key="index">
                        <view class="w-201 h-212 coupon-bg">
                            <image
                                :src="getBaseUrl() + '/admin-api/system/file/19/get/23fe45455d13d2659448450ac4c6386c53c89b517d154c9cd221945761edeafd.png'"
                                class="w-f h-212"
                            ></image>
                            <view class="price w-f h-212 f fd-c ai-c jc-c" v-if="item.discountType == 1">
                                <view class="fs-72 fw-600 text-color5">{{ item.discountPrice }}</view>
                                <view class="fs-24 text-color5 mt-22">满{{ item.usePrice }}元可用</view>
                            </view>
                            <view class="price f fd-c ai-c jc-c" v-if="item.discountType == 2">
                                <view class="fs-72 fw-600 text-color5 f"
                                    >{{ item.discountPercent }}<view class="fs-24 fw-400 text-color5 f ai-f-e zhe ml-4">折</view></view
                                >
                                <view class="mt-22 fs-24 text-color5">无门槛</view>
                            </view>
                        </view>
                        <view class="f f1 ai-c jc-s-b coupon-box pl-24 pr-40">
                            <view class="f f1 fd-c">
                                <view class="fs-32 fw-600 text-color4">{{ item.name }}</view>
                                <view class="fs-24 text-color2 mt-8 text">限“猫猫和狗狗的粮食”购买服务使用</view>
                                <view class="fs-20 text-color3">即将到期 {{ item.validStartTime }}-{{ item.validEndTime }}</view>
                            </view>
                            <image :src="item.checked ? selectCheck : select" class="w-32 h-32 ml-32"></image>
                        </view>
                    </view>
                </scroll-view>
                <view class="ph-40 pv-20 btn">
                    <u-button text="确定" color="#FABB3C" shape="circle" @click="submit"></u-button>
                </view>
            </view>
        </u-popup>
    </view>
</template>
<script setup lang="ts">
import { ref, toRefs, getCurrentInstance } from 'vue';
import { getBaseUrl } from '@/utils/env';
import { couponMatchList, couponPage } from '@/services/api/index/cupon';
import { ordersettlement } from '@/services/api/shop/order';
import selectCheck from '@/static/select-check.png';
import select from '@/static/select.png';
const emit = defineEmits(['selectCoupon']);
const { proxy } = getCurrentInstance();
const props = defineProps({
    list: {
        type: Array,
    },
    orderData: {
        type: Object,
    },
    params: {
        type: Object,
    },
});
const { list, orderData, params } = toRefs(props);
const couponList = ref([]);
const coupon = ref();
const show = ref(false);
const curt = ref(0);
const couponPrice = ref(0);
const statusList = ref([
    {
        name: '可用优惠券',
    },
    {
        name: '已用优惠券',
    },
    {
        name: '过期优惠券',
    },
]);
// 1, "未使用
// 2, "已使用
// 3, "已过期
const useListParams = ref({
    pageNo: 1,
    pageSize: 1000,
    status: 2,
});
const expireListParams = ref({
    pageNo: 1,
    pageSize: 1000,
    status: 3,
});
const useList = ref([]);
const expireList = ref([]);
getCoupon();
function submit() {
    emit('selectCoupon', coupon.value);
    show.value = false;
}
//切换优惠券列表
function changeStatus(data: any) {
    curt.value = data.index;
}
//选择优惠券
async function selectCoupon(item: any, index: number) {
    couponList.value.forEach((item) => {
        item.checked = false;
    });
    couponList.value[index].checked = !couponList.value[index].checked;
    coupon.value = couponList.value[index];
    const itemsData: any = [];
    // list.value.forEach((item) => {
    //     item.goods.forEach((items: any) => {
           
    //     });
    // });
	orderData.value.items.forEach((items: any) => {
	        
			itemsData.push({
			    skuId: items.spuId,
			    count: items.count,
			});
	    });
    const { data } = await ordersettlement({
        items: itemsData,
        addressId: params.value.addressId || null,
        pointStatus: params.value.pointStatus,
        deliveryType: params.value.deliveryType,
        couponId: coupon.value.id,
    });
    couponPrice.value = data.price.couponPrice;
}
//获取优惠券
async function getCoupon() {
    const spuIds: string[] = [];
    const skuIds: string[] = [];
    const categoryIds: string[] = [];
	console.log(orderData.value)
	orderData.value.items.forEach((items: any) => {
            spuIds.push(items.spuId);
            skuIds.push(items.skuId);
            categoryIds.push(items.categoryId);
        });
        

    const { data } = await couponMatchList({ price: orderData.value.price.totalPrice, spuIds: spuIds, skuIds: skuIds, categoryIds: categoryIds });
    if (data.length > 0) {
        data.forEach((item: any) => {
            item.discountPercent = item.discountPercent / 100;
            item.validStartTime = proxy.$moment(item.validStartTime).format('YYYY.MM.DD');
            item.validEndTime = proxy.$moment(item.validEndTime).format('YYYY.MM.DD');
            item.checked = false;
        });
    }
    couponList.value = data;
    const useData = await couponPage(useListParams.value);
    useList.value = useData.data.list;
    const expireData = await couponPage(expireListParams.value);
    expireList.value = expireData.data.list;
    statusList.value = [
        {
            name: `可用优惠券 (${data.length})`,
        },
        {
            name: `已用优惠券 (${useData.data.total})`,
        },
        {
            name: `过期优惠券 (${expireData.data.total})`,
        },
    ];
}

function getShow() {
    show.value = true;
}
defineExpose({
    getShow,
});
</script>
<style lang="scss" scoped>
.coupon {
    .btn {
        border-top: 1px solid #f5f5f5;
    }
    ::v-deep .u-button__text {
        font-size: 22rpx !important;
        font-weight: 400 !important;
        color: #222222;
    }
    ::v-deep .u-button {
        height: 48rpx !important;
        border: 1px solid #dddddd !important;
    }
    .coupon-box {
        background: #f5f5f5;
        .text {
            min-height: 68rpx;
        }
    }
    .coupon-bg {
        position: relative;
        .price {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
        }
    }
}
</style>
